import { observer } from 'mobx-react'
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Form, Input, Switch, Button, message } from 'antd'

const { TextArea } = Input

const PostManagementAdd: React.FC = () => {
    const navigate = useNavigate()
    const [form] = Form.useForm()
    const [loading, setLoading] = useState(false)

    const handleSubmit = async () => {
      try {
          const values = await form.validateFields()
          console.log('Success:', values);
        setLoading(true)
        // TODO: 调用添加接口
        message.success('添加成功')
        navigate('/setting/enterpriseManagement/postManagement')
      } catch (error) {
        message.error('添加失败')
      } finally {
        setLoading(false)
      }
  }
    return (
      <div className="add-app-detail">
        <div className="basic-info">
          <h2 className="title">基础信息</h2>
          <Form
            form={form}
            labelCol={{ span: 4}}
            style={{ maxWidth: 600 }}
          >
            <Form.Item
              label="岗位名称"
              name="name"
              rules={[{ required: true, message: '请输入岗位名称' }]}
            >
              <Input placeholder="请输入岗位名称" />
            </Form.Item>

            <Form.Item
              label="岗位编码"
              name="code"
              rules={[{ required: true, message: '请输入岗位编码' }]}
            >
              <Input placeholder="请输入岗位编码" />
            </Form.Item>

            <Form.Item
              label="状态"
              name="status"
              valuePropName="checked"
              initialValue={true} // 默认开启
              rules={[{ required: true, message: '请选择状态' }]}
            >
              <Switch/>
            </Form.Item>

            <Form.Item
              label="岗位描述"
              name="description"
              rules={[
                { max: 200, message: '最多不超过200字' },
              ]}
            >
              <TextArea rows={4} placeholder="请输入岗位描述，最多不超过200字。" />
            </Form.Item>
          </Form>
          </div>
          <div className="form-actions">
          <Button type="primary" htmlType="submit" loading={loading} onClick={handleSubmit}>
            保存
          </Button>
          <Button onClick={() => navigate(-1)}>返回</Button>
        </div>
      </div>
    )
}

export default observer(PostManagementAdd)
